<?xml version="1.0" encoding="UTF-8" ?>

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:p="http://primefaces.org/ui"
      	  xmlns:ui="http://java.sun.com/jsf/facelets"
      	  xmlns:t="http://myfaces.apache.org/tomahawk">

	<h:body>
    	<ui:composition template="../../templates/general.xhtml">
      		<ui:define name="content">
      		
      			<f:event type="preRenderView" listener="#{alunosBean.init}" />

      			<p:growl id="msgs" showDetail="true"/>
      			
      			<h1 class="page-header">
					<i class="fa fa-user fa-3"></i> Alunos
				</h1>
      			
      			<p:menuButton id="menuAluno" value="Opções" style="float:right;">
        			<p:menuitem value="Gravar" action="#{alunosBean.gravarEditar}" process="@this :form:alunosTable" update=":form:msgs :form:alunosTable" icon="ui-icon-disk" rendered="#{!alunosBean.disableComponent}"/>
        			<p:menuitem value="Editar" action="#{alunosBean.editar}" process="@this" update=":form:msgs :form:alunosTable :form:menuAluno" icon="ui-icon-arrowrefresh-1-w" rendered="#{alunosBean.disableComponent}"/>
        			<p:menuitem value="Novo Aluno" action="#{alunosBean.novo}" oncomplete="PF('alunoDlg').show();" icon="ui-icon-arrowrefresh-1-w"/>
    			</p:menuButton>
      			
      			<p:dataTable id="alunosTable" var="aluno" value="#{alunosBean.alunos}" style="margin-top:75px;">
       				
       				<p:ajax event="rowToggle" onstart="test();" />
       				
       				<p:column style="width:45px; font-size: 0.9em;">
            			<p:rowToggler />
        			</p:column>
      				
      				<p:column headerText="Nome" style="font-size: 0.9em;">
            			<h:outputText value="#{aluno.nome}" />
        			</p:column>
      				
      				<p:column headerText="Número" style="font-size: 0.9em;">
            			<h:outputText value="#{aluno.numero}" />
        			</p:column>
        			<p:column headerText="Grupo" style="font-size: 0.9em;">
            			<h:outputText value="#{not empty aluno.grupo.numero ? aluno.grupo.numero : 'Sem grupo'}" />
        			</p:column>
       				
       				<p:column style="width:60px; font-size: 0.9em;">
						<p:commandButton icon="ui-icon-trash" title="Apagar aluno"
							style="font-size: 0.9em;"
							actionListener="#{alunosBean.apagar(aluno)}"
							update=":form:alunosTable :form:msgs" rendered="#{!alunosBean.disableComponent}">
							<p:confirm header="Confirmação"
								message="Tem a certeza que pretende eliminar este aluno?"
								icon="ui-icon-alert" />
						</p:commandButton>
					</p:column>
       				
       				<p:rowExpansion>
       					<p:panelGrid  columns="2" columnClasses="tableAlunoLabel,tableAlunoValue">
       						
       						<h:outputText value="Nome:" style="font-size: 0.9em;" />
                			<p:inputText value="#{aluno.nome}" disabled="#{alunosBean.disableComponent}" style="font-size: 0.9em;" />
       						
       						<h:outputText value="Número:" style="font-size: 0.9em;" />
                			<p:inputText value="#{aluno.numero}" disabled="#{alunosBean.disableComponent}" style="font-size: 0.9em;" />
 
 							<h:outputText value="Grupo:" style="font-size: 0.9em;" />
            				<p:selectOneMenu id="ddlGrupo" value="#{aluno.grupo}" disabled="#{alunosBean.disableComponent}" converter="#{grupoConverter}" style="font-size: 0.9em; width: 60px;" >
      							<f:selectItems value="#{alunosBean.listaGrupos}" var="g" itemLabel="#{g.numero}" itemValue="#{g}"/>
  							</p:selectOneMenu>
 
               				<h:outputText value="Email:" style="font-size: 0.9em;" />
                			<p:inputText value="#{aluno.email}" disabled="#{alunosBean.disableComponent}" style="font-size: 0.9em; width: 300px;" />
 
                			<h:outputText value="User Github:" style="font-size: 0.9em;" />
                			<p:inputText value="#{aluno.userGitHub}" disabled="#{alunosBean.disableComponent}" style="font-size: 0.9em;" />
                			
                			<h:outputText value="User Redmine:" style="font-size: 0.9em;" />
                			<p:inputText value="#{aluno.userRedmine}" disabled="#{alunosBean.disableComponent}" style="font-size: 0.9em;" />
                			
       					</p:panelGrid>
       				</p:rowExpansion>
       				
      			</p:dataTable>
      			
      			<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" >
					<p:commandButton value="Sim" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
						style="font-size: 0.9em;" />
					<p:commandButton value="Não" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close"
						style="font-size: 0.9em;" />
				</p:confirmDialog>
      			
      			<p:dialog header="Novo Aluno" widgetVar="alunoDlg" modal="true" resizable="false">
    				<p:panelGrid id="novoAlunoForm" columns="2" columnClasses="tableAlunoLabel,tableAlunoValue">
       					
       					<h:outputText value="Nome:" style="font-size: 0.9em;" />
                		<p:inputText value="#{alunosBean.novoAluno.nome}" style="font-size: 0.9em;" />
       						
       					<h:outputText value="Número:" style="font-size: 0.9em;" />
                		<p:inputText value="#{alunosBean.novoAluno.numero}" style="font-size: 0.9em;" />
 
 						<h:outputText value="Grupo:" style="font-size: 0.9em;" />
            			<p:selectOneMenu id="ddlGrupoNovo" value="#{alunosBean.idGrupo}" style="font-size: 0.9em; width: 60px;" >
      						<f:selectItem itemLabel="Seleccione" itemValue=""/>
      						<f:selectItems value="#{alunosBean.listaGrupos}" var="g" itemLabel="#{g.numero}" itemValue="#{g.id}"/>
  						</p:selectOneMenu>
 
               			<h:outputText value="Email:" style="font-size: 0.9em;" />
                		<p:inputText value="#{alunosBean.novoAluno.email}" style="font-size: 0.9em; width: 300px;" />
 
                		<h:outputText value="User Github:" style="font-size: 0.9em;" />
                		<p:inputText value="#{alunosBean.novoAluno.userGitHub}" style="font-size: 0.9em;" />
                			
                		<h:outputText value="User Redmine:" style="font-size: 0.9em;" />
                		<p:inputText value="#{alunosBean.novoAluno.userRedmine}" style="font-size: 0.9em;" />
                			
       				</p:panelGrid>
       				
       				<p:commandButton id="gravarNovo" value="Gravar" process="@this :form:novoAlunoForm" action="#{alunosBean.gravarNovo}" oncomplete="PF('alunoDlg').hide();" update=":form:msgs :form:alunosTable" style="margin-top:10px; font-size: 0.9em;" />
       				<p:commandButton id="cancelarNovo" value="Cancelar" action="#{alunosBean.novo}" oncomplete="PF('alunoDlg').hide();" style="font-size: 0.9em; margin-top:10px; margin-left:10px;" />
				</p:dialog>   
      			
      			<script type="text/javascript">
    				function test(){
        				var i = $('.ui-row-toggler.ui-icon-circle-triangle-s').length;
        				if(i == 1){return;}
            				$('.ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
    				}
				</script>
      			
      		</ui:define>
      	</ui:composition>
    </h:body>
</html>